'use client';

import React from 'react';

interface ShLogoSidebarProps {
  size?: number;
  className?: string;
}

/**
 * 侧边栏专用Logo - 思和智库品牌标识
 * 风格：环形粒子、能量波动、智慧流转
 */
const ShLogoSidebar: React.FC<ShLogoSidebarProps> = ({ size = 36, className = '' }) => {
  return (
    <div 
      className={`inline-flex items-center justify-center ${className}`} 
      style={{ width: size, height: size }}
    >
      <svg 
        width={size} 
        height={size} 
        viewBox="0 0 120 120" 
        fill="none" 
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          {/* 渐变1：蓝紫粉 */}
          <linearGradient id="sidebar-gradient-1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#6366F1" stopOpacity="0.8" />
            <stop offset="50%" stopColor="#A855F7" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#EC4899" stopOpacity="1" />
          </linearGradient>
          
          {/* 渐变2：发光效果 */}
          <radialGradient id="sidebar-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#A855F7" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#6366F1" stopOpacity="0" />
          </radialGradient>

          {/* 滤镜：发光 */}
          <filter id="sidebar-glow-filter" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="2" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>
        
        {/* 背景光晕（脉冲动画） */}
        <circle 
          cx="60" 
          cy="60" 
          r="45" 
          fill="url(#sidebar-glow)"
          opacity="0.5"
        >
          <animate 
            attributeName="r" 
            values="40;50;40" 
            dur="3s" 
            repeatCount="indefinite" 
          />
          <animate 
            attributeName="opacity" 
            values="0.3;0.6;0.3" 
            dur="3s" 
            repeatCount="indefinite" 
          />
        </circle>
        
        {/* 外环（旋转） */}
        <circle 
          cx="60" 
          cy="60" 
          r="35" 
          stroke="url(#sidebar-gradient-1)" 
          strokeWidth="3" 
          fill="none" 
          opacity="0.6"
          strokeDasharray="10 5"
          filter="url(#sidebar-glow-filter)"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 60 60"
            to="360 60 60"
            dur="10s"
            repeatCount="indefinite"
          />
        </circle>
        
        {/* 中环（反向旋转） */}
        <circle 
          cx="60" 
          cy="60" 
          r="28" 
          stroke="url(#sidebar-gradient-1)" 
          strokeWidth="2.5" 
          fill="none" 
          opacity="0.5"
          strokeDasharray="8 4"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 60 60"
            to="0 60 60"
            dur="8s"
            repeatCount="indefinite"
          />
        </circle>
        
        {/* 内核："S" 字形能量核心 */}
        <path
          d="M 60 40 Q 70 45, 70 50 Q 70 55, 60 60 Q 50 65, 50 70 Q 50 75, 60 80"
          stroke="url(#sidebar-gradient-1)"
          strokeWidth="4"
          strokeLinecap="round"
          fill="none"
          filter="url(#sidebar-glow-filter)"
        >
          <animate 
            attributeName="stroke-opacity" 
            values="0.8;1;0.8" 
            dur="2s" 
            repeatCount="indefinite" 
          />
        </path>
        
        {/* "H" 字形能量核心 */}
        <g opacity="0.9">
          <line x1="45" y1="45" x2="45" y2="75" stroke="url(#sidebar-gradient-1)" strokeWidth="3.5" strokeLinecap="round" />
          <line x1="75" y1="45" x2="75" y2="75" stroke="url(#sidebar-gradient-1)" strokeWidth="3.5" strokeLinecap="round" />
          <line x1="45" y1="60" x2="75" y2="60" stroke="url(#sidebar-gradient-1)" strokeWidth="3.5" strokeLinecap="round" />
        </g>
        
        {/* 能量粒子1 */}
        <circle cx="60" cy="25" r="3" fill="#6366F1">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 60 60"
            to="360 60 60"
            dur="6s"
            repeatCount="indefinite"
          />
          <animate 
            attributeName="opacity" 
            values="0.4;1;0.4" 
            dur="2s" 
            repeatCount="indefinite" 
          />
        </circle>
        
        {/* 能量粒子2 */}
        <circle cx="95" cy="60" r="3" fill="#A855F7">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="120 60 60"
            to="480 60 60"
            dur="6s"
            repeatCount="indefinite"
          />
          <animate 
            attributeName="opacity" 
            values="0.4;1;0.4" 
            dur="2.5s" 
            repeatCount="indefinite" 
          />
        </circle>
        
        {/* 能量粒子3 */}
        <circle cx="60" cy="95" r="3" fill="#EC4899">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="240 60 60"
            to="600 60 60"
            dur="6s"
            repeatCount="indefinite"
          />
          <animate 
            attributeName="opacity" 
            values="0.4;1;0.4" 
            dur="3s" 
            repeatCount="indefinite" 
          />
        </circle>
      </svg>
    </div>
  );
};

export default ShLogoSidebar;

